
main {
	header {
		box-sizing: border-box;
		padding: 40px;
		margin-bottom: -40px;
		display: flex;
		flex-direction: row;

		h1 {
			& > .icon {
				display: inline-block;
				padding-right: 14px;
				vertical-align: bottom;
				margin-bottom: 8px;
				font-size: 0.9em;
			}
		}

		&__text {
			display: flex;
			flex-flow: column;
		}

		h4 {
			line-height: 1em;
			opacity: 0.5;
		}

		.header__options {
			margin-left: auto;

			&__wrapper {
				display: flex;
			}

			.context-menu-trigger {
				display: none;
				font-size: 18px;
				padding: 16px 14px;
			}

			.button,
			button {
				font-size: 13px;
				font-weight: 800;
				font-family: $font-family-alt;
				background: transparent;
				text-transform: none;
				padding: 13px 10px;
				margin: 0;
				min-width: 0;
				color: colour('light_grey');
				vertical-align: unset;
				border: none;

				&:hover {
					color: colour('blue');
					box-shadow: none;

					&:before {
						display: none;
					}
				}

				@include theme('light') {
					color: colour('darkest_grey');

					&:hover {
						color: colour('blue');
					}

					&:active {
						background: transparent;
					}
				}
			}
		}

		&.overlay {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 98;
		}

		@include responsive($bp_medium){
			padding: 10px 10px 10px 0;
			margin-bottom: -10px;

			h1 {
				vertical-align: top;
				padding-top: 6px;

				& > .icon {
					margin-bottom: 2px;
					padding-right: 6px;
					margin-left: 10px;
				}
			}

			.header__options {
				top: 1rem;
				right: 1rem;

				.context-menu-trigger {
					display: block;
					font-size: 1.4rem;
				}

				&__wrapper {
					display: none;
				}
			}
		}
	}
}
